<template>
  <div class="index" v-loading="loading">
    <div class="mian">
       
        <div class="wrap">
            <div class="crumbs flex">
                <router-link to="/" class="p">首页</router-link>
                <div class="p">>{{title}}</div>
            </div>
            <div class="service-title">
                <h2>资讯中心</h2>
                <p>Information Center</p>
            </div>
            <div class="con">
                 <div class="left">
                    <div class="li on" @click="togNav('/information')">台商区介绍</div>
                    <div class="li" @click="togNav('/information/indexe')">新闻动态</div>
                    <div class="li" @click="togNav('/information/indexa')">园区介绍</div>
                    <div class="li" @click="togNav('/information/indexb')">通知公告</div>
                    <div class="li" @click="togNav('/information/indexc')">创业</div>
                    <div class="li" @click="togNav('/information/indexd')">求学</div>
                </div>
                <div class="right-nav">
                    <div class="li" :class="i==smallCategoryindex?'on':''" v-for="(item,i) in smallCategorys" :key="i" @click="togsmallCategory(i)">{{item}}</div>
                </div>
                <div class="right-list flex flex-wrap">
                    <div class="img-li" v-for="(item,i) in list" :key="i" @click="togNav('/information/details?id='+item.id+'&p=1')">
                        <div class="img" :style="{background: '#eee url('+item.imgUrl+') center no-repeat'}"></div>
                    </div>
                </div>
            </div>
            <el-pagination
                background
                prev-text="上一页"
                next-text="下一页"
                layout="prev, pager, next"
                @current-change="curPage"
                :page-size="req.limit"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
  </div>
</template>
<script>
import {findAllLista} from '@/api/service/service'
export default {
  name: "index",
  data() {
    return {
        img:"http://sznews.tetimes.com/uploads/allimg/201012/8-20101223340D02.png",
        req: {
            limit: 8,
            page: 1,
            bigCategory:1,
            smallCategory:"名人风采"
        },
        total:0,
        list:[],                            //列表数据
        loading:false,
        title:"",
        smallCategorys:["名人风采","五源流长","艺术瑰宝","美食特产","旅游景点","教育文化"],
        smallCategoryindex:0                          
    }
  },
  created(){
    if(this.$route.meta){
        this.title = this.$route.meta.title;
    }
  },
  mounted(){
      this.findAllListapi()
  },
  methods:{
    togNav(e){
        
        this.$router.push(e)
    },
    curPage(e){
      
      this.req.page = e;
      this.findAllListapi()
    },
    togsmallCategory(i){
        if(i != this.smallCategoryindex){
            this.smallCategoryindex = i;
            let req = this.req;
            req.page = 1;
            req.smallCategory = this.smallCategorys[i]
            this.req = req;
            this.findAllListapi()
        }

    },
    findAllListapi(){
        this.loading = true;
      findAllLista(this.req).then(res=>{
          this.loading = false;
        if(res.code === 0){
          this.total = res.total;
          this.list = res.data;
        }
      })
    },
  }
}
</script>
<style scoped>
.mian{
    padding-bottom: 100px;
    min-height: 200px;
    background: #fff;
    position: relative;
}
.wrap{
    width: 1200px;
    margin: auto;
}
.crumbs{
    padding: 10px 0 0 0;
}
.crumbs .p{
    font-size: 14px;
}
.con{
    position: relative;
    
    margin: auto;
    width: 1000px;
    min-height: 248px;
}
.con .left{
    position: absolute;
    left: -236px;
    width: 218px;
    top: 10px;
}
.con .left .li{
    width: 100%;
    background: #E8E8E8;
    line-height: 48px;
    height: 48px;
    color: #333333;
    font-size: 18px;
    text-align: center;
    cursor:pointer;
}
.con .left .li.on{
    background: #3DABC4;
    color: #fff;   
}
.right-nav{
    text-align: center;
    padding: 1px 0;
}
.right-nav .li{
    display: inline-block;
    font-size: 16px;
color: #333333;
    padding: 0 15px;
    cursor:pointer;
}
.right-nav .li.on{
    color: #CE3A5B;
}
.right-list .img-li{
    padding:25px;
    flex-shrink: 0;
    flex-grow: 0;
    cursor:pointer;
}
.right-list .img-li .img{
    width: 200px;
    height: 170px;
    border-radius: 20px;
    background-size: cover !important;
}
@media (min-width: 1680px) {
    .con{
        position: relative;
        width: 100%;
    }
    .right-list .img-li .img{
        width: 240px;
        height: 192px;
        border-radius: 20px;
    }
}
</style>